<template>
    <!--地图挂载dom-->
    <div id="map">
        <div class="tool">
            <el-button @click="startAnimation">开始</el-button>
            <el-button @click="stopAnimation">停止</el-button>
            <el-slider
                    @change="handleSpeed"
                    v-model="speed"
                    height="200px">
            </el-slider>
        </div>
    </div>
</template>

<script>
    //引入依赖
    import {Feature, Map, View} from 'ol'
    import {OSM, Vector as VectorSource} from 'ol/source'
    import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
    import {LineString} from 'ol/geom';
    import {Fill, Stroke, Style, Icon, Circle as CircleStyle} from 'ol/style';
    import {getVectorContext} from "ol/render";
    import Point from 'ol/geom/Point';
    import image from '../data/icon.png'

    let geom = null;
    let position = null;
    let styles = null;
    let geoMarker = null;
    let vectorLayer = null;
    export default {
        name: 'ProjectTrackPlay',
        data() {
            return {
                animating: false,//动画是否结束标记
                speed: 1,//默认速度
                distance: 0,
                lastTime: null,//最后一帧默认渲染的实际
                coordinates: [//地图路线的初始值
                    [
                        114.27429199218749,
                        30.5717205651999
                    ],
                    [
                        113.92822265625,
                        29.267232865200878
                    ],
                    [
                        113.92822265625,
                        28.57487404744697
                    ],
                    [
                        113.79638671875,
                        27.46928747369202
                    ],
                    [
                        113.73046875,
                        26.941659545381516
                    ],
                    [
                        113.8623046875,
                        26.017297563851745
                    ],
                    [
                        113.62060546875,
                        24.686952411999155
                    ],
                    [
                        113.4228515625,
                        23.745125865762923
                    ],
                    [
                        113.291015625,
                        23.120153621695614
                    ],
                    [
                        113.258056640625,
                        23.117627611920557
                    ]
                ]
            }
        },
        mounted() {

            this.osm = new TileLayer({
                source: new OSM(),
            });
            this.map = new Map({
                target: 'map',//指定挂载dom，注意必须是id
                layers: [
                    this.osm
                ],
                //配置视图
                view: new View({
                    center: [113.24981689453125, 26.126468438108688],   //视图中心位置
                    projection: "EPSG:4326", //指定投影
                    zoom: 5   //缩放到的级别
                })
            });

            this.addLineWithPoints(this.coordinates);
        },
        methods: {
            //添加轨迹线和起始点
            addLineWithPoints(coordinates) {
                //线条要素
                geom = new LineString(coordinates);
                const routeFeature = new Feature({
                    type: 'route',
                    geometry: geom,
                });
                //开始的要素
                const startMarker = new Feature({
                    type: 'icon',
                    geometry: new Point(geom.getFirstCoordinate()),
                });
                //结束的要素
                const endMarker = new Feature({
                    type: 'icon',
                    geometry: new Point(geom.getLastCoordinate()),
                });
                position = startMarker.getGeometry().clone();
                //移动的点
                geoMarker = new Feature({
                    type: 'geoMarker',
                    geometry: position,
                });

                styles = {
                    'route': new Style({
                        stroke: new Stroke({
                            width: 6,
                            color: [237, 212, 0, 0.8],
                        }),
                    }),
                    'icon': new Style({
                        image: new Icon({
                            anchor: [0.5, 1],
                            src: image,
                        }),
                    }),
                    'geoMarker': new Style({
                        image: new CircleStyle({
                            radius: 7,
                            fill: new Fill({color: 'black'}),
                            stroke: new Stroke({
                                color: 'white',
                                width: 2,
                            }),
                        }),
                    }),
                };
                //将要素数据添加到矢量图层
                vectorLayer = new VectorLayer({
                    source: new VectorSource({
                        features: [routeFeature, geoMarker, startMarker, endMarker],
                    }),
                    style: function (feature) {
                        return styles[feature.get('type')];
                    },
                });

                this.map.addLayer(vectorLayer);

                //添加移动标签，这里使用一个圆点代替
                let movePointFeature = new Feature({
                    geometry: new Point(coordinates[0])
                })
                //this.geoMarker = movePointFeature
                vectorLayer.getSource().addFeature(movePointFeature)
                this.vectorLayer = vectorLayer
            },

            //移动要素
            moveFeature(event) {
                //每一帧渲染的时间
                const time = event.frameState.time;
                //上一帧与当前帧渲染的时间差
                const elapsedTime = time - this.lastTime;
                console.log(elapsedTime)
                //通过上一帧与当前帧渲染时的时间差计算出当前坐标需要移动的距离
                //计算距离的distance保持数据再0与1之间，不断自增
                this.distance = (this.distance + (this.speed * elapsedTime) / 1e6) % 2;
                // 返回沿线串提供的分数处的坐标
                // 是一个介于 0 和 1 之间的小数
                // 其中 0 是线串的开始，1 是结束
                const currentCoordinate = geom.getCoordinateAt(
                    this.distance > 1 ? 2 - this.distance : this.distance
                );
                console.log(this.distance)
                if (this.distance >= 1) {
                    //路线结束
                    this.stopAnimation();
                }
                // console.log(currentCoordinate)
                //当前的坐标设置到移动的marker
                position.setCoordinates(currentCoordinate);
                //获取到渲染事件的上下文对象
                const vectorContext = getVectorContext(event);
                //给移动的marker设置样式
                vectorContext.setStyle(styles.geoMarker);
                //使用渲染事件的上下文对象，绘制geometry
                vectorContext.drawGeometry(position);
                this.map.render();//手动渲染地图
                this.lastTime = time;
            },
            startAnimation() {
                this.animating = true;
                this.lastTime = Date.now();//当前时间
                vectorLayer.on('postrender', this.moveFeature);//渲染时监听
                //将移动到哪个地方的点置空
                geoMarker.setGeometry(null);
            },
            stopAnimation() {
                //停止动画
                this.animating = false;
                geoMarker.setGeometry(position);//移动的marker就当前移动点的位置
                vectorLayer.un('postrender', this.moveFeature);//将渲染事件解绑
            },
            handleSpeed(val) {
                console.log(val)
                this.speed = val;
            }

        }
    }
</script>

<style scoped>
    #map {
        width: 100%;
        height: 100%;
    }

    .tool {
        position: absolute;
        top: 50px;
        right: 50px;
        z-index: 9999;
    }
</style>
